<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置项graphic-图形元素</title>
  <script src="./echarts.js"></script>
  <style lang="css">
    #chart1 {
      width: 100%;
      height: 600px;
      border: 1px solid red;
      float: left;
    }
  </style>
</head>
<body>
  <div id="chart1"></div>
  <button>点击</button>

  <script>
    const myChart1 = echarts.init(document.getElementById('chart1'));

    myChart1.setOption({
      color: ['#8ec9eb'],
      title: {
        text: '当月销售量',
      },
      legend: { // 图例
      },
      tooltip: {
        trigger: 'axis', // y轴触发必须设置axis、注意这里的y轴是类目轴、柱状图
        formatter: 'formatter: "Temperature: <br/>{b}km : {c}℃"',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true, // 网格区域是否包含轴
      },
      xAxis: {// x轴是数值轴
        axisLabel: {
          formatter: '{value} ℃'
        },
        splitLine: { // 分割线
          show: false,
        }
      },
      yAxis: {// Y轴是类目轴
        data: ['0', '10', '20', '30', '40', '50', '60', '70', '80'],
        axisLabel: {
          formatter: '{value} km'
        },
        axisLine: {
          onZero: false,
        }
      },
      graphic: [
        {
          id: 'favicon',
          type: 'image',
          style: {
            image: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/v4/zh/images/favicon.png',
            width: 150, // 如果宽和高不给，可能不会触发点击事件
            height: 150,
          },
          // 下面四个是css3的transform
          position: [0, 0], // 平移 x轴距离、y轴距离
          origin: [75, 75], // 旋转中心
          rotation: Math.PI / 180 * 90, // 这里不能直接给角度90，要把角度转成弧度,Math.PI/180*角度
          scale: [1, 1], // 缩放  css3的transform，这里的执行顺序是旋转、缩放、平移
          // 下面四个是有关位置的属性
          // left: '50%', // center
          // top: '',
          bottom: 'middle',
          right: '100',
          info: 'hello 你好啊！', // 在点击事件中可以拿到
          silent: false,
          invisible: false, // true 元素不可见，false 可见，相当于visibility，虽然不可见但会响应事件
          ignore: false, // true 元素不可见(相当于display:none)，false 可见
          cursor: 'crosshair', // crosshair十字准星
          draggable: true,

          onclick (event) {
            console.log(111, event)
          },
          ondrag () {
            console.log('ondrag 鼠标按下并开始拖动--一直触发')
          },
          ondragstart () {
            console.log('ondragstart 鼠标按下')
          },
          ondragend () {
            console.log('ondragend 鼠标松开')
          },
          ondragenter () {
            console.log('碰到我了')
          },
          ondragleave () {
            console.log('触碰离开我了')
          },
          ondragover () {
            console.log('ondragover -- 该事件不会触发，有问题呀')
          },
        },
        {
          id: 'favicon2',
          type: 'image',
          style: {
            image: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/v4/zh/images/favicon.png',
            width: 50, // 如果宽和高不给，可能不会触发点击事件
            height: 50,
          },
          draggable: true,
        },
        // 文本块
        {
          type: 'text',
          style: {
            text: '横轴表示温度，单位是℃',
            // x: 500, // 位置
            // y: 300, // 位置
            font: 'bold 20px Microsoft YaHei',
            fill: 'red',
          },
          left: 'center',
          top: 'center',
        },
        // 矩形
        {
          type: 'rect',
          shape: {
            width: 100,
            height: 100,
            x: 100, // 位置
            y: 200, // 位置
          },
          style: {
            fill: 'rgba(15, 186, 100, 0.5)',
            stroke: 'blue',
            lineWidth: 5,
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowColor: '#000'
          },
        },
        // 圆
        {
          type: 'circle',
          shape: {
            cx: 330, // 位置
            cy: 250, // 位置
            r: 100, // 半径
          },
          style: {
            fill: 'rgba(15, 186, 100, 0.5)',
            stroke: 'blue',
            lineWidth: 5,
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowColor: '#000'
          },
        },
        // 圆环
        {
          type: 'ring',
          shape: {
            cx: 170, // 位置
            cy: 450, // 位置
            r: 100, // 半径
            r0: 50, // 内半径
          },
          style: {
            fill: 'rgba(15, 186, 100, 0.5)',
            stroke: 'blue',
            lineWidth: 5,
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowColor: '#000'
          },
        },
        // 扇形
        {
          type: 'sector',
          shape: {
            cx: 450, // 位置
            cy: 450, // 位置
            r: 100, // 半径
            r0: 50, // 内半径
            startAngle: Math.PI/180*0, // 起始弧度
            endAngle: Math.PI/180*180, // 结束弧度
          },
          z:100,
          style: {
            fill: 'rgba(15, 186, 100, 0.5)',
            stroke: 'yellow',
            lineWidth: 5,
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowColor: '#000'
          },
        },
        // 圆弧
        {
          type: 'arc',
          shape: {
            cx: 600, // 位置
            cy: 340, // 位置
            r: 100, // 半径
            r0: 50, // 内半径
            startAngle: Math.PI/180*0, // 起始弧度
            endAngle: Math.PI/180*180, // 结束弧度
          },
          z:100,
          style: {
            // fill: 'rgba(15, 186, 100, 0.5)',
            stroke: 'green',
            lineWidth: 5,
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowColor: '#000'
          },
        },
        // 多边形
        {
          type: 'polygon',
          shape: {
            points: [[400, 200], [600, 200], [500, 300]], // 三角形
            smooth: '0', // 是否平滑曲线 0-1，如果值不是0，线条会变平滑，看上去就不是三角形了
          },
          style: {
            fill: 'rgba(15, 186, 100, 0.5)',
            stroke: 'teal',
            lineWidth: 5,
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowColor: '#000'
          },
        },
        // 折线，如果设置不平滑(不设置smooth或者smooth=0)，画出来就是直直的折线，也可以用这种方式话多边形
        {
          type: 'polyline',
          shape: {
            points: [[700, 200], [800, 200], [750, 300]],
            smooth: 'spline', // 是否平滑曲线
            smooth: '1', // 是否平滑曲线
          },
          z:100,
          style: {
            fill: 'rgba(15, 186, 100, 0.5)',
            stroke: 'pink',
            lineWidth: 5,
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowColor: '#000'
          },
        },
        // 直线
        {
          type: 'line',
          shape: {
            x1: 930,
            y1: 40,
            x2: 660,
            y2: 270,
            percent: 0.5, // 画50%
          },
          z:100,
          style: {
            fill: 'rgba(15, 186, 100, 0.5)',
            stroke: 'blue',
            lineWidth: 5,
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowColor: '#000'
          },
        },
        {
          type: 'group',
          rotation: Math.PI/180*45, // 旋转弧度
          right: 100,
          bottom: 80,
          bounding: 'raw',
          children: [
            { // 方块
              type: 'rect',
              left: 'center',
              top: 'center',
              shape: {
                width: 800,
                height: 100,
              },
              z: 100,
              style: {
                fill: 'rgba(0,0,0,0.3)',
              },
            },
            { // 文本
              type: 'text',
              left: 'center',
              top: 'center',
              z: 100,
              style: {
                fill: '#fff',
                text: '作者：魔界人',
                font: 'bold 20px Microsoft YaHei',
              }
            }
          ],
        }
      ],
      series: {
        name: '高度(km)与气温(℃)变化关系',
        type: 'bar',
        data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
      }
    })

    const btn = document.querySelector('button')
    btn.onclick = function () {
      myChart1.setOption({
        graphic: [
          {
            id: 'favicon',
            $action: 'merge', // replace
            style: {
              // image: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/v4/zh/images/favicon.png',
              width: 200,
              height: 200,
            },
          }
        ],
      })
    }

    myChart1.on('click', function (params) {
      console.log('info', params.info)
    })
  </script>
</body>
</html>